<template>
    <div id="views">
      <section class="sec1">
        <div class="relative">
          <div class="range">
            <p class="bg"></p>
          </div>
          <div class="rangeText">
            <div class="sts inThisStep">
              <p class="p1">
                <span class="inThis"></span>
              </p>
              <p class="p2">发起提现</p>
            </div>
            <div class="sts">
              <p class="p1">
                <span class="radio"></span>
              </p>
              <p class="p2">领取税筹任务</p>
            </div>
            <div class="sts">
              <p class="p1">
                <span class="radio"></span>
              </p>
              <p class="p2">上传凭证</p>
            </div>
            <div class="sts">
              <p class="p1">
                <span class="radio"></span>
              </p>
              <p class="p2">成功提现</p>
            </div>
          </div>
        </div>
      </section>
      <!--审核通过-->
      <section class="sec2" v-if="task && task.state == 4">
<!--      <section class="sec2">-->
        <div class="d1">
          <p class="p1">
            <img src="../../common/imgs/audit1.png" alt="">
          </p>
          <p class="p2">提现申请审核通过</p>
        </div>
        <div class="d2 detail">
          <p class="p1" v-if="task.name">
            <span class="left">众乐邦注册姓名</span>
            <span class="right">{{task.name}}</span>
          </p>
          <p class="p1" v-if="task.telphone">
            <span class="left">众乐邦注册手机号</span>
            <span class="right">{{task.telphone}}</span>
          </p>
          <p class="p1" v-if="task.withdraw_money">
            <span class="left">提现金额</span>
            <span class="right orange">{{task.withdraw_money}} CNY</span>
          </p>
          <p class="p1" v-if="task.process_time">
            <span class="left">审核时间</span>
            <span class="right">{{task.process_time}}</span>
          </p>
          <p class="p1" v-if="task.zlb_order_num">
            <span class="left">任务ID</span>
            <span class="right orange">#{{task.zlb_order_num}}</span>
          </p>
        </div>
        <div class="d3 sub">
          <button class="yellowbtn" @click="getTask()">领取税筹任务</button>
        </div>
      </section>
      <!--1审核中-->
      <section class="sec2" v-if="task && (task.state == 1 || task.state == 15 || task.state == 14)">
        <div class="d1">
          <p class="p1">
            <img src="../../common/imgs/audit5.png" alt="">
          </p>
          <p class="p2">提现申请审核中</p>
        </div>
        <div class="d2 detail">
          <p class="p1" v-if="task.name">
            <span class="left">众乐邦注册姓名</span>
            <span class="right">{{task.name}}</span>
          </p>
          <p class="p1" v-if="task.telphone">
            <span class="left">众乐邦注册手机号</span>
            <span class="right">{{task.telphone}}</span>
          </p>
          <p class="p1" v-if="task.withdraw_money">
            <span class="left">提现金额</span>
            <span class="right orange">{{task.withdraw_money}} CNY</span>
          </p>
          <p class="p1" v-if="task.create_time">
            <span class="left">提现时间</span>
            <span class="right">{{task.create_time}}</span>
          </p>
        </div>
      </section>
      <div class="imgWin"></div>
      <login-zlb ref="loginZlb" @loginSuccess="taskAjax()"/>
    </div>
</template>
<script>
  import {taskDetail, fetchTaxTask, checkZlbLoginStatus} from '../../http/api';
  import {apiReady} from "../../common/js/initApiApp";
  export default {
    name: "audit",
    data(){
      return{
        account : null, //用户数据: 电话号 token 头像
        currentPage : 1, //当前页
        pageSize : 15,
        order_num : null,
        task : {},
        savePws : false,
        app : null ,//apicloud app
      }
    },
    components:{
      LoginZlb : resolve => { require(['../../components/loginZlb'],resolve) },//登录众乐帮
    },
    watch:{},
    mounted() {
      let query = this.$route.query;
      this.order_num = query.order_num;
      let thiz = this;
      window.apiready = function(){
        let app = apiReady.ready();
        // app.trigger('loadList');
        thiz.app = app;
        thiz.app.closeFlower(0);
        thiz.account = thiz.app.getAccount();
        thiz.loadPage();
        thiz.app.closeW('step_2');
        thiz.app.closeW('step_3');
        thiz.app.closeW('step_4');
      };
    },
    methods:{
      show(){
        this.modalClass = 'modal-show';
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      loadPage(){
        let thiz = this;
        let param = {
          token : thiz.account.token,
          version : thiz.app.inAV,
          order_num : thiz.order_num
        };
        taskDetail(param).then(res => {
          thiz.log('res++++++',res);
          if(res.code == 200){
            let task = res.data.task;
            thiz.task = task;
            thiz.log('任务详情+++',task);
          }
        });
      },
      getTask(){
        let thiz = this;
        thiz.$refs.loginZlb.show();
        this.$refs.loginZlb.getApp(thiz.app);
      },
      taskAjax(){
        let thiz = this;
        let app = thiz.app;
        let param = {
          token : thiz.account.token,
          version : thiz.app.inAV,
          zlb_order_num : thiz.task.zlb_order_num
        };
        let location = window.location.href.split('#')[0]+'#';
        fetchTaxTask(param).then(res => {
          thiz.log('领取任务接口返回+++',res);
          if(res.code == 200){
            app.trigger('loadList');
            require('../../common/js/toast').toast('领取任务成功');
            thiz.timeout(function () {
              let path = `${location}/taxReward_step2?order_num=${thiz.order_num}`;// location + '/taxReward_step2' + '?order_num='+ thiz.order_num;
              app.trigger('task_goPage',{ path : path ,  name :'step_2'}); //给app一个监听发送，让app打开path页面 , window页面名称为name
            },1500)
            // thiz.$router.push({ path : '/taxReward_step2' , query : {order_num : thiz.order_num}});
          }
        }).catch( err => {
          thiz.log('领取任务失败返回',err);
        });
      }
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  #views{
    background: #F8F8F8;padding-bottom: 0.48rem;
  }
  .sec1{
    height: 1.88rem;background: #fff;padding:0 0.54rem;padding-top: 0.7rem;
    >.relative{
      padding: 0 0.42rem;position: relative;
      >.range{
        position: relative;
        >.bg{
          background: #AAAAAA;height: 0.02rem;
        }
      }
      >.rangeText{
        color: #aaa;display: flex;justify-content: space-between;position: absolute;z-index: 1;left: 0;top: -0.14rem;width: 100%;
        >div{
          text-align: center;
          >.p1{
            display: inline-block;height: 0.28rem;overflow: hidden;
            >.radio{
              background: #aaa;width: 0.13rem;height: 0.13rem;display: block;border-radius: 50%;overflow: hidden;margin-top: 0.075rem;
            }
            >.inThis{
              display: inline-block;width: 0.28rem;height: 0.28rem;background: url("../../common/imgs/blackradio.png") center center no-repeat;
              background-size: 100% 100%;margin-top: 0;
            }
          }
          >.p2{
            font-size: 0.24rem;padding-top: 0.17rem;
          }
        }
        >.inThisStep{
          color: #262626;
        }
      }
    }
  }
  .sec2{
    background: #fff;margin-top: 0.2rem;
    >.d1{
      text-align: center;
      >.p1{
        padding: 0.2rem 0;font-size: 0;
        >img{
          width: 1.16rem;
        }
      }
      >.p2{
        color: #262626;font-size: 0.34rem;
      }
      >.p3{
        color: #F67311;font-size: 0.24rem;text-align: center;padding-top: 0.1rem;
      }
    }
    >.d2{
      padding: 0 0.3rem;padding-top: 0.35rem;
      >p{
        overflow: hidden;padding: 0.24rem 0rem;border-bottom: 0.01rem solid#EBEBEB;
        &:last-child{
          border-bottom: 0;
        }
        >span{
          font-size: 0.28rem;
        }
        >.left{
          float: left;color: #999;
        }
        >.right{
          float: right;
        }
        >.orange{
          color: #F67311;
        }
        >.refuseReson{
          width: 40%;display: inline-block;line-height: 120%;
        }
      }
    }
    >.sub{
      padding: 0 0.3rem;padding-top: 0.4rem;background: #F8F8F8;
      >button{
        border-radius: 0.04rem;height: 0.88rem;font-size: 0.28rem;color: #181818;margin-top: 0;
      }
    }
  }
</style>
